.navbar .site-name {
	color: #FF34B3 !important;
}

.home-blog {
	.hero {
		background-size: cover !important;
		background-position: center 0 !important;
		.description {
			display: none;
		}
		:first-child h1 {
			color: #FF34B3;
			font-family: "Times New Roman",Georgia,Serif;
		}
		.home-more {
			display: block;
			margin: 0 auto;
			position: relative;
		}
		#homeBlog {
			left: 0;
			bottom: 3.6rem;
			width: 100%;
			position: absolute;
		}
	}
	.home-blog-wrapper {
		.info-wrapper .category-wrapper .category-item {
			box-shadow: none !important;
		}
	}
}
		
.hero::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.hero a::after {
	content: "";
	position: absolute;
	display: block;
	left: calc(50% - 0.5rem);
	width: 1rem;
	height: 1rem;
	border: 0.25rem solid #fff;
	border-bottom-right-radius: 0.15rem;
	border-top: none;
	border-left: none;
	transform-origin: 50% 50%;
	transform: rotate(45deg);
	cursor pointer;
	-webkit-animation: arrowMove-data 3s infinite;
	animation: arrowMove-data 3s infinite;
}

.about {
	display flex;
	flex 1;
	position relative;
	padding 50px 40px;
	box-shadow 3px 3px 5px #BFBFBF;
	animation aboutAnimation 1.5s 1s forwards;
	-webkit-animation aboutAnimation 1.5s 1s forwards;
	opacity 0;
	.about-side {
		flex 50%;
		.about-author {
			float left;
			margin-right 20px;
		}
		.about-authorInfo {
			li {
				list-style-type none;
			}
		}
		
		.about-skill-Info {
			clear both;
			content "";
			p {
				margin-top 25px;
				font-weight bold;
			}
			.container {
			    background-color #F0F0F0;
				border-radius 5px;
				.skills {
					height 15px;
					border-radius 5px;
				}
				.html {
					animation htmlAnimation 2.5s 1s forwards; 
					-webkit-animation htmlAnimation 2.5s 1s forwards;
				}
				.css {
					animation cssAnimation 2.5s 1s forwards;
					-webkit-animation cssAnimation 2.5s 1s forwards;
				}
				.js {
					animation jsAnimation 2.5s 1s forwards; 
					-webkit-animation jsAnimation 2.5s 1s forwards;
				}
				.python {
					animation pythonAnimation 2.5s 1s forwards; 
					-webkit-animation pythonAnimation 2.5s 1s forwards;
				}
			}
		}
	}
	.about-main {
		flex 50%;
		margin-left 30px;
		.about-content {
			.about-time {
				position absolute;
				right 0px;
				bottom 0px;
				width 100px;
				margin 10px 20px;
			}
		}
	}
}

@keyframes htmlAnimation {
	0% {
		width: 0%;
		background-color: #4CAF50;
	}
	100% {
		width: 65%;
		background-color: #4CAF50;
	}
}

@keyframes cssAnimation {
	0% {
		width: 0%;
		background-color: #2196F3;
	}
	100% {
		width: 75%;
		background-color: #2196F3;
	}
}

@keyframes jsAnimation {
	0% {
		width: 0%;
		background-color: #CD3700;
	}
	100% {
		width: 70%;
		background-color: #CD3700;
	}
}

@keyframes pythonAnimation {
	0% {
		width: 0%;
		background-color: #808080;
	}
	100% {
		width: 50%;
		background-color: #808080;
	}
}

@keyframes aboutAnimation {
	0% {
		transform translateZ(0) rotate(75deg);
	}
	50% {
		transform translateZ(0) rotate(-7deg);
	}
	100% {
		transform rotate(0deg);
		opacity 1;
	}
}

@keyframes nailAnimation {
	0% {
		width 352px;
		height 276px;
	}
	100% {
		width 88px;
		height 69px;
		opacity 1;
	}
}

@keyframes arrowMove-data {
	0% {
		transform: translateY(0px) rotate(45deg);
	}
	50% {
		transform: translateY(40px) rotate(45deg);
		border: 0.25rem solid rgba(255, 52, 179, 0.6);
		border-bottom-right-radius: 0.15rem;
		border-top: none;
		border-left: none;
	}
	100% {
		transform: translateY(0px) rotate(45deg);
	}
}

@media (max-width: 768px){
	.about {
		display block;
		padding 50px 25px;
		.about-author {
			img {
				width 120px;
				height 120px;
			}
		}
		.about-authorInfo {
			margin-left 45%;
			word-wrap break-word;
			li {
				list-style-type none;
				font-size 13px;
			}
		}
		.about-main {
			margin 25px 0;
		}
	}
}

@media (max-width: 320px) {
	.about{
		.about-authorInfo {
			clear both;
			content "";
			margin 0;
		}
	}
}